<template>
	<view class="store-wrap">
		<block v-if="value.style == 1">
			<view class="store-box" :style="{background:bgColor,color:textColor}">
				<view class="store-info" @click="toStoreList()">
					<view class="info-box" :style="{color:textColor}">
						<text class="title" v-if="store.store_id">{{store.store_name}}</text>
						<text class="title" v-else>请选择门店</text>
						<text>
							<text class="change ns-margin-left">切换</text>
							<text class="iconfont iconright"></text>
						</text>
					</view>
					<view class="address-box">
						<text class="address" :style="{color:textColor}">
							<text class="iconfont icondizhi"></text>
							<text v-if="store.store_id">{{store.full_address}}{{store.address}}</text>
							<text v-else>无法获取您当前的位置</text>
						</text>
					</view>
				</view>
				<view class="store-image" @click="selectStore()">
					<image :src="$util.img(store.store_image)" v-if="store.store_image && store.store_id" mode="aspectFit"></image>
					<image :src="$util.getDefaultImage().default_goods_img" v-else mode="aspectFit"></image>
				</view>
			</view>
		</block>
		
		<block v-if="value.style == 2">
			<view class="store-box store-two" :style="{background:bgColor,color:textColor}">
				<view class="store-image" @click="selectStore()">
					<image :src="$util.img(store.store_image)" v-if="store.store_image && store.store_id" mode="aspectFit"></image>
					<image :src="$util.getDefaultImage().default_goods_img" v-else mode="aspectFit"></image>
				</view>
				<view class="store-info" @click="toStoreList()">
					<view class="info-box" :style="{color:textColor}">
						<text class="title" v-if="store.store_id">{{store.store_name}}</text>
						<text class="title" v-else>请选择门店</text>
					</view>
					<view class="address-box">
						<text class="address" :style="{color:textColor}">
							<text class="iconfont icondizhi"></text>
							<text v-if="store.store_id">{{store.full_address}}{{store.address}}</text>
							<text v-else>无法获取您当前的位置</text>
						</text>
					</view>
				</view>
				<text class="switchover">
					<text class="change ns-margin-left">切换</text>
					<text class="iconfont iconright"></text>
				</text>
			</view>
		</block>
		
		<block v-if="value.style == 3">
			<view class="store-box store-three" :style="{background:bgColor,color:textColor}">
				<view class="store-info" @click="toStoreList()">
					<view class="store-image" @click="selectStore()">
						<image :src="$util.img(store.store_image)" v-if="store.store_image && store.store_id" mode="aspectFit"></image>
						<image :src="$util.getDefaultImage().default_goods_img" v-else mode="aspectFit"></image>
					</view>
					<view class="info-box" :style="{color:textColor}">
						<text class="title" v-if="store.store_id">{{store.store_name}}</text>
						<text class="title" v-else>请选择门店</text>
						<text class="">
							<text class="change ns-margin-left">切换</text>
							<text class="iconfont iconright"></text>
						</text>
					</view>
				</view>
				<view class="store-icon" @click="search()">
					<text class="iconfont iconsousuo"></text>
				</view>
			</view>
		</block>
		
	</view>
</template>

<script>
	// 门店列表
	import Map from '@/common/js/map/openMap.js'
	export default {
		name: 'ns-store',
		props: {
			storeId: {
				type: [String, Number],
				default(){
					return 0
				}
			},
			textColor:{
				type: [String]
			},
			bgColor:{
				type: [String]
			},
			value: {
				type: Object
			}
		},
		data() {
			return {
				type: 'country',
				store: {
					store_name: ''
				},
				showStore: 1,
				size: 2,
				num: 1,
				isNetwork: 1, //是否可以继续请求
				storeList: [],
				latitude: null, // 纬度
				longitude: null // 经度
			};
		},
		watch:{
			storeId(){
				this.getStoreList();
			}
		},
		created() {
			uni.getLocation({
				type: 'gcj02',
				success: res => {
					uni.setStorage({
						key: 'location',
						data: {
							latitude: res.latitude,
							longitude: res.longitude
						}
					});
					this.latitude = uni.getStorageSync('location').latitude;
					this.longitude = uni.getStorageSync('location').longitude;
					this.getStoreList();
					// if(this.storeId){
					// 	this.getInfo()
					// }
				},
				fail:res=>{
					this.getStoreList();
					// if(this.storeId){
					// 	this.getInfo()
					// }
				}
			});
		},
		methods: {
			//跳转至门店列表
			toStoreList() {
				this.$util.redirectTo('/otherpages/index/storelist/storelist', {})
			},
			//获取门店详情
			// getInfo(e) {
			// 	let storeid=e?e:this.storeId;
			// 	let data={
			// 		store_id: storeid,
			// 	};
			// 	if(this.latitude && this.longitude){
			// 		data.latitude=this.latitude;
			// 		data.longitude=this.longitude;
			// 	}
			// 	this.$api.sendRequest({
			// 		url: '/api/store/info',
			// 		data: data,
			// 		success: res => {
			// 			if (res.data) {
			// 				this.store = res.data;
			// 				uni.setStorageSync('store', this.store);
			// 			}
			// 		}
			// 	});
			// },
			selectStore() {
				this.$util.redirectTo('/otherpages/index/storedetail/storedetail', {
					store_id: this.store.store_id,
					back: '/pages/index/index/index'
				});
			},
			search(){
				this.$util.redirectTo('/otherpages/goods/search/search');
			},
			//获取门店列表
			getStoreList() {
				let data = {
					page: 1,
					page_size: 2
				};
				if (this.latitude && this.longitude) {
					data.latitude = this.latitude;
					data.longitude = this.longitude;
				}
				this.$api.sendRequest({
					url: '/api/store/page',
					data: data,
					success: res => {
						let newArr = [];
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							});
						}
						this.storeList = newArr;
						for(let i=0;i<this.storeList.length;i++){
							if(this.storeList[i].store_id==res.data.store_id){
								this.store = this.storeList[i];
								uni.setStorageSync('store', this.storeList[i]);
								this.$forceUpdate();
							}
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.store-wrap {
		padding: 20rpx 20rpx;
		box-sizing: border-box;

		.store-box {
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.noStoreBox{
			width: 100%;
			height: 100%;
			line-height: 120rpx;
			color: #ffffff;
		}
		.store-info {
			width: 458rpx;
			height: 120rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.info-box {
				color: #ffffff;
				display: flex;
				align-items: flex-end;
				margin-bottom: 25rpx;

				text {
					line-height: 1.2;
				}

				.title {
					max-width: 60%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: $ns-font-size-x-lg;
					margin-right: 40rpx;
				}

				.change {
					font-size: $ns-font-size-sm;
				}

				.iconfont {
					font-size: $ns-font-size-sm;
				}
			}
			.address-box{
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				color: #FFFFFF;
			}
			.address {
				width: 100%;
				color: #ffffff;
				line-height: 1.2;
				font-size: $ns-font-size-sm;
				.iconfont {
					font-size: $ns-font-size-sm;
					margin-right: 6rpx;
				}
			}

		}

		.store-image {
			margin-top: 10rpx;
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}
	.store-two{
		.store-image{
			align-self: flex-start;
			margin-right: 14rpx;
		}
		.info-box{
			margin-bottom: 0 !important;
		}
		.store-info{
			height: 106rpx; 
		}
		.switchover{
			display: flex;
			width: 60px;
		}
	}
	.store-three{
		padding: 0 !important;
		.store-info{
			height: auto;
			justify-content: end;
			flex-direction: inherit;
			align-items: center;
		}
		.info-box{
			margin-left: 18rpx;
			margin-bottom: 0 !important;
		}
		.store-icon text{
			font-size: 36rpx;
			color: #fff;
		}
		
	}
</style>
